<template>
  <view class="container">
    <uni-section :title="title || '基本信息'" type="line">
      <view class="formClass">
        <uni-forms ref="AppForm" :model="formData" :rules="rules" label-position="top" labelWidth="200px"
                   @submit="onSubmit">
          <template v-for="formItem in formItems" :key="formItem.field">
            <view v-show="showOn(formItem)">
              <uni-forms-item v-if="formItem.type === 'switch'" :label="formItem.label" :name="formItem.field"
                              :required="formItem.required">
                <uni-data-checkbox v-model="formData[formItem.field]" :localdata="formItem.options"/>
              </uni-forms-item>
              <uni-forms-item v-else-if="formItem.type === 'datePicker'" :label="formItem.label" :name="formItem.field"
                              :required="formItem.required">
                <uni-datetime-picker v-model="formData[formItem.field]" :type="formItem.dateType" :end="formItem.endDate"
                                     return-type="timestamp" @change="val => selectDate(val, formItem)"/>
              </uni-forms-item>
              <uni-forms-item v-else-if="formItem.type === 'select'" :label="formItem.label" :name="formItem.field"
                              :required="formItem.required">
                <uni-data-picker v-model="formData[formItem.field]" :localdata="formItem.options"
                                 :popup-title="formItem.title"/>
              </uni-forms-item>
              <uni-forms-item v-else :label="formItem.label" :name="formItem.field" :required="formItem.required">
                <uni-easyinput v-model="formData[formItem.field]" :placeholder="`${formItem.label}`"/>
              </uni-forms-item>
            </view>
          </template>
          <button type="submit" @click="onSubmit">提交</button>
        </uni-forms>
      </view>
    </uni-section>
  </view>
</template>

<script>
import {computed, ref, watch} from 'vue';
import {formatDate, getCopy} from '@/assets/ts/publicUtil';

export default {
  name: 'AppForm',
  props: {
    formItems: {
      type: Array,
      default: () => [],
      required: true
    },
    buttonName: {
      type: String,
      required: false
    },
    title: {
      type: String,
      required: false
    },
    currentData: {
      type: Object,
      default: () => ({})
    },
    rules: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props, {emit}) {
    const formData = ref(getCopy(props.currentData));

    watch(
        () => props.currentData,
        (newVal) => {
          if (newVal) {
            formData.value = getCopy(newVal)
          }
        }
    );

    const showOn = computed(() => {
      return (formItem) => {
        return !formItem.showOn || (formItem.showOn && formItem.showOn(formData.value));
      };
    });

    function selectDate(val, formItem) {
      formData.value[formItem.field] = formatDate(new Date(val), formItem.dateType);
      formItem.show = false;
    }

    watch(formData.value, (newVal) => {
      emit('update:currentData', newVal);
    });

    return {
      formData,
      showOn,
      selectDate
    };
  },
  methods: {
    onSubmit() {
      this.$refs.AppForm.validate()
          .then((res) => {
            console.log('success', res);
            this.$emit('onSubmit', this.formData);
          })
          .catch((err) => {
            console.log('err', err);
          });
    }
  }
};
</script>

<style lang="scss">
.formClass {
  padding: 15px;
  background-color: #fff;
}

.segmented-control {
  margin-bottom: 15px;
}

.button-group {
  margin-top: 15px;
  display: flex;
  justify-content: space-around;
}

.form-item {
  display: flex;
  align-items: center;
  flex: 1;
}

.button {
  display: flex;
  align-items: center;
  height: 35px;
  line-height: 35px;
  margin-left: 10px;
}
</style>
